<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建vue实例</title>
</head>

<body>
    <!-- 
      创建vue实例，初始化渲染
      1.准备容器(vue所管理的范围)
      2.引包（开发版本/生产版本） 官网
      3.创建实例
      4.添加配置项=> 完成渲染
        el:指定挂载点，选择器指定控制的是那个盒子
        data:提供数据
    -->

    <div id="app">
        <!-- 这里将来会编写一些 用于渲染的代码逻辑 -->
        {{msg}} {{time}} 分钟
    </div>

    <!-- 这俩不会渲染 因为没有挂载 -->
    <div class="box1">
        {{msg}}
    </div>
    <div class="box2">
        {{time}}
    </div>

    <!-- 引入开发版本  包含完整的注释和警告 -->
    <script src="./script/vue.js"></script>
    <!-- 在线的开发版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->

    <script>
        // 一但引入vuejs核心包，在全局环境，就有了vue 构造函数
        const app = new Vue({
            // 通过el 配置选择器，指定vue 管理的是那个盒子
            el: '#app',
            data: {
                msg: '朱天宇学vue',
                time: 10
            }
        })
    </script>
</body>

</html>